<template>
	<div class="invitation">
		<view class="">
			<view class="my-code container">
				<view class="label">
					我的邀请码：
				</view>
				<view class="code">
					{{ invitationCode }}
				</view>
				<view class="copy" @click.stop="copy(invitationCode)">
					复制
				</view>

			</view>
			<view class="client container" v-for="item in clientList">
				<view class="content-box client-name">
					<view class="label">
						客户名称:
					</view>
					<view class="name">
						{{item.purchaserName}}
					</view>
				</view>
				<view class="content-box client-status">
					<view class="label">
						状态:
					</view>
					<view class="status" :style="'color:'+statusObj[item.status]">
						{{item.status}}
						<view class="icon-doubt" v-if="item.prompt" style="margin-left: 10rpx;" @click="queryStatus(item)">
							<uni-icons type="help" size="20" color="#8d8d8d"></uni-icons>
						</view>

					</view>
				</view>
			</view>
		</view>
		<Dialog :statusContent="statusContent" v-if="dialog" @shutDown="dialog = false"></Dialog>
	</div>
</template>

<script>
	import {
		shareInvitationCode,
		invitationList
	} from '@/api/personalCenter/index.js'
	import Dialog from '@/components/home/dialog.vue'

	export default {
		components: {
			Dialog
		},
		data() {
			return {
				dialog: false,
				statusContent: '',
				clientList: [],
				statusObj: {
					'邀请成功': '#009557',
					'未下单': '#EF231B',
					'已下单': '#2871FC',
					'邀请失败': '#EF231B'
				},
				invitationCode: '',
				page: {
					pageSize: 10,
					pageNumber: 1
				},
				shareData: '',
				total: 0
			}
		},
		onLoad(e) {
			this.invitationCode = e.invitationCode
			this.getInvitationList()
		},
		//分享点击事件
		onNavigationBarButtonTap() {
			this.getShareInfo()
			let that = this
			// #ifdef APP-PLUS
			uni.share({
				provider: "weixin",
				scene: "WXSceneSession",
				title: that.shareData.title,
				summary: that.shareData.description,
				imageUrl: that.shareData.thumbData,
				type: 5,
				miniProgram: {
					id: that.shareData.originalAppId,
					type: 0, //
					path: that.shareData.path,
					webUrl: 'https://www.baidu.com'
				},
				success: (res) => {

					if (res.data.code == 0) {
						wx.showToast({
							title: '发送邀请好友成功',
							icon: 'success',
							duration: 2000
						})
					} else {
						wx.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 2000
						})
					}
				},
				fail: (err) => {
					console.log("转发失败", err)
				}
			});
			// #endif
		},
		onShareAppMessage(res) {
			this.getShareInfo()
			return {
				type: 0, //0正式版 1开发板 2体验版
				title: this.shareData.title,
				path: this.shareData.path,
				imageUrl: this.shareData.thumbData,
				desc: this.shareData.description
			}
		},
		onPullDownRefresh() {
			this.clientList = []
			this.page.pageNumber = 1
			this.getInvitationList()
		},
		onReachBottom() {
			if (this.total <= this.clientList.length) return
			this.page.pageNumber++
			this.getInvitationList()
		},
		methods: {
			copy(item) {
				uni.setClipboardData({
					data: item,
					success: function() {
						uni.showToast({
							icon: 'success',
							title: '复制成功',
							mask: true
						})
					},
					fail: function() {
						uni.showToast({
							icon: 'error',
							title: '复制失败',
							mask: true
						})
					}
				})
			},
			queryStatus(val) {
				this.dialog = true
				this.statusContent = val.prompt
			},
			//获取列表
			getInvitationList() {
				invitationList(this.invitationCode, this.page).then(res => {
					if (res.code === 200) {
						// console.log(res.data)

						this.clientList.push(...res.data.records)

						uni.stopPullDownRefresh()
					}
				})
			},

			async getShareInfo() {
				let res = await shareInvitationCode(this.invitationCode)
				if (res.code === 200) {
					this.shareData = res.data
				}
			}
		}
	}
</script>

<style scoped lang='scss'>
	.invitation {
		padding: 20rpx 25rpx;


		.container {
			padding: 32rpx 20rpx;
			border-radius: 11rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
		}

		.my-code {
			display: flex;
			font-size: 29rpx;

			.code {
				margin-right: 16rpx;
			}

			.copy {
				display: flex;
				align-items: center;
				border-radius: 14rpx;
				border: 1rpx solid #2871FC;
				padding: 3rpx 9rpx;
				font-size: 20rpx;
				color: #2871FC;
			}
		}

		.content-box {
			display: flex;
			justify-content: space-between;
			font-size: 29rpx;


			.label {

				color: #585858;
			}


		}

		.content-box:nth-child(1) {
			margin-bottom: 30rpx;
		}

		.client-name {
			.label {}

			.name {
				width: 380rpx;
				text-align: right;
				line-height: 1.5;
			}
		}

		.client-status {
			.icon-doubt {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.status {
				display: flex;
				align-items: center;
			}
		}





	}
</style>